import React from 'react';
import {Form, Select, Input, Row, Col, DatePicker, Button, Modal, Table, Collapse} from 'antd'
import ManagerBody from '../../components/ManagerBody';
import {
    getRiskMerchant,
    get_trcsedic,
} from '../../actions/rcseRuleMerchantActions';

const {RangePicker} = DatePicker;
const dateFormat = "YYYY-MM-DD"

const FormItem = Form.Item;
const Option = Select.Option;
const Panel = Collapse.Panel;
import {Containerization, setTitle} from '../../common/PublicComponent';
//RCS_NEW_MANAGER_MERCHAT
@setTitle('账务管理-原子交易处理','RCS_RULE_MERCHANT_NEW_MANAGER')
@Containerization(
    state => ({
        paginationData: state.MerchantReducer.paginationData,
        entryData: state.MerchantReducer.entryData,
        trcseDicData: state.MerchantReducer.trcseDicData,
    })
)
@Form.create()
export default class SubTcdList extends React.Component {
    state = {
        pageNum: 1,
        pageSize: 20,
        total: 10,
        startHitTime: '',
        endHitTime:'',
        visible: false,
    }
    columns = [{
        title: '主交易码',
        dataIndex: 'mno',
        key: 'mno',
    }, {
        title: '交易名称',
        dataIndex: 'mecFlg',
        key: 'mecFlg',
    }, {
        title: '状态',
        dataIndex: 'rootAgent',
        key: 'rootAgent',
    }, {
        title: '子交易码',
        dataIndex: 'branch',
        key: 'branch',
    }, {
        title: '子交易名称',
        dataIndex: 'mecTypeName',
        key: 'mecTypeName',
    }, {
        title: '账户类型',
        dataIndex: 'mecTypeName',
        key: 'mecTypeName',
    }, {
        title: '账户科目号',
        dataIndex: 'mecTypeName',
        key: 'mecTypeName',
    }, {
        title: '收支类型',
        dataIndex: 'mecTypeName',
        key: 'mecTypeName',
    }, {
        title: '收支类型',
        dataIndex: 'mecTypeName',
        key: 'mecTypeName',
    }, {
        title: '交易类型',
        dataIndex: 'mecTypeName',
        key: 'mecTypeName',
    }, {
        title: '资金类型',
        dataIndex: 'mecTypeName',
        key: 'mecTypeName',
    }]

    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    handleOk = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }
    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }
    componentWillMount() {
        const {pageNum, pageSize} = this.state;
        const params = {
            pageNum,
            pageSize,
        }
        this.handleChange('mecFlg');
        this.handleChange('mecType');
        this.handleChange('handleSts');

    }
    componentWillUnmount(){
        this.props.dispatch({type:'API_GET_RISK_MERCHANT',data:[]})
    }

    serachData = (para) => {
        const formData = this.props.form.getFieldsValue();
        const params = {
            ...para,
            ...formData,
        }
        this.props.dispatch(getRiskMerchant(params)).then(() => {
            const {total, current, size} = this.props.paginationData;
            this.setState({total: total, pageNum: current, pageSize: size})
        })
        //下拉列表查询
    }

    handleSubmit = (e) => {
        const { pageSize,} = this.state;
        this.setState({pageNum:1})
        const params = {
            pageNum:1,
            pageSize,
        }
        this.serachData(params);
    }
    componentDidMount(){
        this.handleSubmit();
    }
    handleChange = (name) => {
        // console.log(`selected ${value}`);
        this.props.dispatch(get_trcsedic(name)).then(() => {
            // const {data} = this.props.trcseDicData;
            // console.log(data);
        })
    }

    onChange = (dates, dateStrings)=> {
        this.setState({startHitTime:dateStrings[0],endHitTime: dateStrings[1]})
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    }
    showAddModal = () => {
        // this.initData()
        this.setState({
            visible: true,
        });
    }
    handleOk = (e) => {
        this.setState({
            visible: false,
        });
    }
    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }
    render() {

        const {trcseDicData} = this.props;
        const {getFieldDecorator} = this.props.form;
        const {
            entryData = [],
        } = this.props;
        const layout = {
            xs: 24,
            sm: 12,
            md: 6,
        }
        const customPanelStyle = {
            // background: '#f7f7f7',
            borderRadius: 4,
            marginBottom: 24,
            border: 0,
            overflow: 'hidden',
        };
        return (

            <div>
                <Form  style={{margin: 'auto', marginTop: 20}} className="container">
                    <Collapse bordered={false}>
                        <Panel header="查询" style={customPanelStyle}>
                            <Row style={{paddingTop: 30}}>
                                <Col {...layout}>
                                    <FormItem
                                        label="主交易码"
                                        labelCol={{span: 10}}
                                        wrapperCol={{span: 14}}
                                    >
                                        {getFieldDecorator('mno',{
                                                initialValue:''
                                            }
                                        )(
                                            <Input style={{width: 140}}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col {...layout} style={{float: 'right', textAlign: 'end', marginRight: '2%', marginBottom: 20}}>
                                     <Button type="primary" onClick={() => {
                                        this.handleSubmit()
                                    }} style={{width: 118}}>查询</Button>
                                </Col>
                            </Row>
                        </Panel>
                    </Collapse>
                </Form>
                <Button className="addBtn" onClick={this.showAddModal} type="primary" ghost>添加主交易码</Button>
                <ManagerBody columns={this.columns}
                             dataSource={entryData}
                             pageNum={this.state.pageNum}
                             pageSize={this.state.pageSize}
                             total={this.state.total}
                             changeSize={(v) => {
                                 this.setState({pageSize: v})
                             }}
                             changePage={(v) => {
                                 this.setState({pageNum: v})
                             }}
                             serachData={this.serachData}
                             expandedRowRender={record => <p style={{ margin: 0 }}>1111</p>}
                ></ManagerBody>
            </div>
        );
    }
}


